<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>音乐搜索</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.4/css/layui.min.css" integrity="sha512-p0DH9E8qEXvUu4TEAa5U2hjPgrFZsr70g1lhjZuHKYDBGQLz68q6BVkWtMaUsWqh5Lh7lEd6oc+1mkvXQ4GiUg==" crossorigin="anonymous" referrerpolicy="no-referrer" />

  <link rel="stylesheet" href="./index.css"></link>
</head>
<body>

<div class="search-container">
  <h2>🎵 音乐搜索</h2>

  <div class="search-box">
    <input type="text" id="keyword" placeholder="请输入关键词..." value="张杰">
    <button type="button" id="searchButton" onclick="performSearch()">搜索</button>
  </div>

  <!-- 搜索结果表格 -->
   <div class="table-wrapper">

     <table id="resultTable">
       <thead>
         <tr>
           <th>序号</th>
           <th>歌名</th>
           <th>歌手</th>
           <th>专辑</th>
           <th>发布时间</th>
           <th>操作</th>
         </tr>
       </thead>
       <tbody id="tableBody">
       </tbody>
     </table>
   </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.4/layui.min.js" integrity="sha512-NFhZx891+Ah0GZylMblVIVbHQ0SXgPNnFBFFIElMQo9UF4JryxtJbhqfoWV9VBfRJqQJ6+i20aRPkCI5QwOzPQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
  const searchButton = document.getElementById('searchButton');
  const keywordInput = document.getElementById('keyword');
  const tableBody = document.getElementById('tableBody');

  function performSearch() {
    const keyword = keywordInput.value.trim();
    if (!keyword) {
      alert("请输入关键词");
      return;
    }

    // 清空之前的搜索结果
    tableBody.innerHTML = "<tr><td colspan='7' class='no-result'>加载中...</td></tr>";

    fetch('http://127.0.0.1:8082/api/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({
        keyword: keyword
      })
    })
      .then(response => {
        if (!response.ok) throw new Error('网络响应失败');
        return response.json();
      })
      .then(data => {
        console.log('搜索结果:', data);

        const results = data.data?.result || [];

        if (results.length === 0) {
          tableBody.innerHTML = "<tr><td colspan='7' class='no-result'>未找到相关结果</td></tr>";
          return;
        }

        tableBody.innerHTML = "";
        results.forEach((item, index) => {
          const row = document.createElement("tr");

          row.innerHTML = `
            <td>${index + 1}</td>
            <td>${item.title || '-'}</td>
            <td>${item.singer || '-'}</td>
            <td>${item.album || '-'}</td>
            <td>${item.publish_date || '-'}</td>
            <td class="actions">
              <button class="play-btn" onclick="playSong('${item.title}', '${item.url}')">播放</button>
              <button class="download-btn" onclick="downloadSong('${item.title}', '${item.download_url}')">下载</button>
            </td>
          `;
          

          tableBody.appendChild(row);
        });
      })
      .catch(error => {
        console.error('请求出错:', error);
        tableBody.innerHTML = "<tr><td colspan='7' class='no-result' style='color:red;'>请求失败，请查看控制台</td></tr>";
      });
  }

  
</script>

</body>
</html>